import { Callout } from "nextra-theme-docs";
import { APITable } from "../../../components/APITable";

# `@stackflow/config`

### Config

- Stackflow에 `Config` 라는 개념을 새롭게 도입해요.
- 액티비티 선언을 리액트 의존성 없이 정적으로 할 수 있어요.

다음과 같이 작성할 수 있습니다.

```tsx showLineNumbers filename="stackflow.config.ts" copy
import { defineConfig } from "@stackflow/config";

export const config = defineConfig({
  activities: [
    {
      name: "HomeActivity",
    },
    {
      name: "MyProfileActivity",
    }
  ],
  transitionDuration: 270,
});
```

<Callout emoji="💡">
  이제 플러그인에서 필요한 추가적인 설정이 있을때, 플러그인 함수의 파라미터 뿐 아니라 `@stackflow/config`를 확장하여 플러그인 구동에 필요한 정보를 받을 수도 있어요.
</Callout>

### `decorate` API

다음과 같이 Config 타입을 확장해서 `config`에 접근할 수 있는 다양한 장소에 활용할 수 있어요.

```typescript
declare module "@stackflow/config" {
  interface Config<T extends ActivityDefinition<string>> {
    relayEnvironment: RelayEnvironment;
  }
}

config.decorate("relayEnvironment", myRelayEnvironment);
```

### API

<APITable>
|                    |                   |                                                    |
| ------------------ | ----------------- | -------------------------------------------------- |
| activities         | `ActivityDefinition<string>[]`             | 액티비티 배열                            |
| transitionDuration | `number`          | 전환 애니메이션의 지속 시간                      |
| initialActivity    | `() => ActivityDefinition<string>["name"]` | 초기 액티비티 설정 |
</APITable>
